<template>
  <div class="project-items">
    <ElForm
      :model="rules"
      :rules="Prorules"
      ref="project"
      label-width="100px"
      class="demo-ruleForm"
      label-position="left"
    >
      <ElFormItem label="活动资金承担方式" required>
        <div class="project-radio">
          <p>平台承担比例</p>
          <ElFormItem>
            <ElSelect v-model="list.methods_info_choose" placeholder=">">
              <ElOption label=">" value=">"></ElOption>
              <ElOption label="≥" value="≥"></ElOption>
              <ElOption label="=" value="="></ElOption>
              <ElOption label="≤" value="≤"></ElOption>
              <ElOption label="<" value="<"></ElOption>
            </ElSelect>
          </ElFormItem>
          <ElFormItem prop="methods_info_num">
            <ElInput v-model.number="list.methods_info_num"></ElInput>
            <span>%</span>
          </ElFormItem>
        </div>
      </ElFormItem>
      <ElFormItem label="活动中订购商品限购（C）" required>
        <div class="Owner-prorject">
          <ElFormItem class="Owner-choose">
            <ElRadio v-model="list.shopOwner_radio" label="1">不限</ElRadio>
            <ElRadio v-model="list.shopOwner_radio" label="2">限购</ElRadio>
          </ElFormItem>
          <ElFormItem prop="shopOwner_info_num" class="Owner-num">
            <ElInput v-model.number="list.shopOwner_info_num"></ElInput>
            <span>件</span>
          </ElFormItem>
        </div>
      </ElFormItem>
      <ElFormItem label="单商品单个用户限购（C）" required>
        <div class="Owner-prorject">
          <ElFormItem class="Owner-choose">
            <ElRadio v-model="list.selfOwner_radio" label="1"
              >供应商限购</ElRadio
            >
            <ElRadio v-model="list.selfOwner_radio" label="2">平台限购</ElRadio>
          </ElFormItem>
          <ElFormItem prop="selfOwner_info_num" class="Owner-num">
            <ElInput v-model.number="list.selfOwner_info_num"></ElInput>
            <span>件</span>
          </ElFormItem>
        </div>
      </ElFormItem>
      <ElFormItem label="超出限购支持继续下单（C）" required>
        <div class="Owner-prorject">
          <ElFormItem class="Owner-choose">
            <ElRadio v-model="list.support_num" label="1"
              >否，不可继续下单</ElRadio
            >
            <ElRadio v-model="list.support_num" label="2"
              >是，以原价继续下单</ElRadio
            >
          </ElFormItem>
        </div>
      </ElFormItem>
      <ElFormItem label="活动限量（C）" required>
        <div class="Owner-prorject">
          <ElFormItem class="Owner-choose">
            <ElRadio v-model="list.edition_radio" label="1">供应商限量</ElRadio>
            <ElRadio v-model="list.edition_radio" label="2">平台限量</ElRadio>
          </ElFormItem>
          <ElFormItem prop="edition_info_num" class="Owner-num">
            <ElInput v-model.number="list.edition_info_num"></ElInput>
            <span>件</span>
          </ElFormItem>
        </div>
      </ElFormItem>
      <ElFormItem label="优惠方式（C）" required>
        <div class="special_content">
          <div class="special_item">
            <ElRadio v-model="list.special_radio" label="1">单品折扣</ElRadio>
            <ElSelect v-model="list.special_radio_choose_one" placeholder=">">
              <ElOption label=">" value=">"></ElOption>
              <ElOption label="≥" value="≥"></ElOption>
              <ElOption label="=" value="="></ElOption>
              <ElOption label="≤" value="≤"></ElOption>
              <ElOption label="<" value="<"></ElOption>
            </ElSelect>
            <ElFormItem prop="special_num_one">
              <ElInput v-model.number="list.special_num_one"></ElInput
              ><span>折</span>
            </ElFormItem>
          </div>
          <div class="special_item">
            <ElRadio v-model="list.special_radio" label="2">单品立减</ElRadio>
            <ElSelect v-model="list.special_radio_choose_two" placeholder=">">
              <ElOption label=">" value=">"></ElOption>
              <ElOption label="≥" value="≥"></ElOption>
              <ElOption label="=" value="="></ElOption>
              <ElOption label="≤" value="≤"></ElOption>
              <ElOption label="<" value="<"></ElOption>
            </ElSelect>
            <ElFormItem prop="special_num_two">
              <ElInput v-model.number="list.special_num_two"></ElInput
              ><span>折</span>
            </ElFormItem>
          </div>
          <div class="special_item">
            <ElRadio v-model="list.special_radio" label="3">单品一口价</ElRadio>
            <ElSelect v-model="list.special_radio_choose_three" placeholder=">">
              <ElOption label=">" value=">"></ElOption>
              <ElOption label="≥" value="≥"></ElOption>
              <ElOption label="=" value="="></ElOption>
              <ElOption label="≤" value="≤"></ElOption>
              <ElOption label="<" value="<"></ElOption>
            </ElSelect>
            <ElFormItem prop="special_num_three">
              <ElInput v-model.number="list.special_num_three"></ElInput
              ><span>折</span>
            </ElFormItem>
          </div>
        </div>
        <span @click.prevent="proSubmitForms('ruleForm')"></span>
      </ElFormItem>
    </ElForm>
  </div>
</template>

<script>
import { list, Prorules, project, proSubmitForms } from "./FormInfo";
import {
  ElForm,
  ElFormItem,
  ElInput,
  ElOption,
  ElSelect,
  ElRadio,
} from "element3";
export default {
  components: {
    ElForm,
    ElFormItem,
    ElInput,
    ElOption,
    ElSelect,
    ElRadio,
  },
  setup(props, action) {
    return {
      Prorules,
      list,
      project,
      proSubmitForms,
    };
  },
};
</script>

<style lang="scss">
.project-items {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .el-form {
    flex: 1;
    display: flex;
    flex-direction: column;
    .el-form-item {
      width: 100%;
      margin: 10px 0;
      display: flex;
      .el-form-item__label {
        text-align: left;
        flex: 2;
        margin-top: 1.5%;
      }
      .el-form-item__content {
        flex: 8;
        .project-radio {
          display: flex;
          align-items: center;
          > p {
            width: 20%;
            text-align: center;
            color: rgb(141, 133, 133);
          }
          > .el-form-item {
            width: 20%;

            margin: 0 1%;
            .el-form-item__content {
              display: flex;
              > .el-input {
                margin: 0 10px;
              }
              span {
                color: rgb(141, 133, 133);
              }
            }
          }
        }
        .Owner-prorject {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .Owner-choose {
            width: 36%;
            .el-form-item__content {
              height: 100%;
            }
          }
          .Owner-num {
            .el-form-item__content {
              flex: 1;
              display: flex;
              .el-input {
                margin: 0 10px;
                width: 20%;
              }
            }
          }
        }
        .special_content {
          flex: 1;
          display: flex;
          flex-direction: column;
          .special_item {
            width: 100%;
            margin: 20px 0;
            display: flex;
            align-items: center;
            > .el_radio {
              width: 15%;
            }
            > .el-select {
              width: 15%;
            }
            > .el-form-item {
              width: 20%;
              .el-form-item__content {
                width: 100%;
                height: 100%;
                display: flex;
                .el-input {
                  margin: 0 10px;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>